<template>
  <div>
    <v-chart :options="datas"></v-chart>
    <!-- <button @click="btn">发送</button> -->
  </div>
</template>

<script>
import Axios from "axios";
export default {
  data () {
    return {
      datas: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: 10,
          data: ["销售", "进货", "库存"],
        },
        series: [
          {
            name: "2020-10-7",
            type: "pie",
            selectedMode: "single",
            radius: [0, "30%"],

            label: {
              position: "inner",
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 335, name: "销售", selected: true },
              { value: 679, name: "进货" },
              { value: 1548, name: "库存" },
            ],
          },
          {
            name: "2020-10-7",
            type: "pie",
            radius: ["40%", "55%"],
            label: {
              formatter: "{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ",
              backgroundColor: "#eee",
              borderColor: "#aaa",
              borderWidth: 1,
              borderRadius: 4,

              rich: {
                a: {
                  color: "#999",
                  lineHeight: 22,
                  align: "center",
                },

                hr: {
                  borderColor: "#aaa",
                  width: "100%",
                  borderWidth: 0.5,
                  height: 0,
                },
                b: {
                  fontSize: 16,
                  lineHeight: 33,
                },
                per: {
                  color: "#eee",
                  backgroundColor: "#334455",
                  padding: [2, 4],
                  borderRadius: 2,
                },
              },
            },
            data: [
              { value: 335, name: "销售" },
              { value: 679, name: "进货" },
              { value: 1548, name: "库存" },
            ],
          },
        ],
      },
    };
  },

  methods: {
    // btn() {
    //   Axios.post("http://localhost:3000/user/login", {
    //     username: "小红",
    //     password: "123456",
    //   }).then((res) => {
    //     console.log(res);
    //   });
    // },
  },
};
</script>

<style>
.charts {
  width: 100%;
  height: 100%;
}
</style>
